<template>
  <!--  列表选择-->
  <div v-if="config.viewTypeValue=='3'" class="list-ui-content">
<!--    <el-input :placeholder="listForm.placeholder" v-model="item.label" :title="item.label" size="small" :disabled="true"/>-->
<!--    <select-button @click="selectList" style="margin-left: 5px" text="" v-if="!disabled"/>-->
    <el-input  :placeholder="listForm.placeholder || '请选择'"  v-model="item.label" :title="item.label" size="small"
               clearable readonly >
      <el-button slot="append" icon="el-icon-search" @click="selectList" v-if="!disabled"></el-button>
      <i slot="suffix" class="el-input__icon el-icon-delete" @click="clearValue" v-if="!disabled && item.label"></i>
    </el-input>

    <list-dialog :listForm="listForm" v-if="listForm.open" @selectedRow='selectedRow' ref="listRef"/>
  </div>

  <!--  列表选择 多选-->
  <div v-else-if="config.viewTypeValue=='14'" class="list-ui-content">
    <el-input :placeholder="listForm.placeholder || '请选择'" v-model="item.label"  :title="item.label" size="small"
               clearable readonly >
      <el-button slot="append" icon="el-icon-search" @click="selectList" v-if="!disabled"></el-button>
      <i slot="suffix" class="el-input__icon el-icon-delete" @click="clearValue" v-if="!disabled && item.label"></i>
    </el-input>
<!--    <el-input :placeholder="listForm.placeholder" v-model="item.label"  :title="item.label" size="small" :disabled="true"/>-->
<!--    <select-button @click="selectList" style="margin-left: 5px" text="" v-if="!disabled"/>-->
    <list-select-dialog :listForm="listForm" :item="item" v-if="listForm.open" @selectedsRow='selectedsRow'
                        ref="listRef"/>
  </div>
</template>


<script>
import listDialog from "./../listDialog.vue";
import listSelectDialog from "./../listSelectDialog.vue";
export default {
  name: "config-list",
  components: {listDialog,listSelectDialog},
  props: {
    config: {
      type: Object,
      default: () => {}
    },
    listForm: {
      type: Object,
      default: {}
    },
    item: {
      type: Object,
      default: {}
    },
    disabled: {
      type: Boolean,
      default: false
    },
  },
  methods: {
    clearValue() {
      this.$set(this.item, 'value', '');
      this.$set(this.item, 'label', '');
    },
    // 列表选中的行
    selectedRow(val) {
      this.$emit('selectedRow', val);
    },
    //多选
    selectedsRow(val) {
      this.$emit("selectedsRow", val);
    },
    // 列表选择
    selectList() {
      this.listForm.open = true;
      this.$nextTick(() => {
        this.$refs.listRef.getList(this.value);
      });
      // this.$emit("selectList");
    },
  }
}
</script>

<style scoped>

</style>
